<template>
  <div class="userlist content">
    <div class="head_top">
      <el-form
        :inline="true"
        :model="formInline"
        ref="topform"
        class="demo-form-inline"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input
            v-model="formInline.username"
            placeholder=""
            class="w100"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input
            v-model="formInline.email"
            placeholder=""
            class="w150"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select
            v-model="formInline.role_id"
            placeholder="请选择状态"
            class="w150"
          >
            <el-option label="管理员" value="2"></el-option>
            <el-option label="老师" value="3"></el-option>
            <el-option label="学生" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="clear">清除</el-button>
          <el-button @click="add">+新增用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table :data="tableData" class="user_table" width="100%">
        <el-table-column label="序号" width="50">
          <template v-slot="scope">
            <span>{{
              pagination.pageSize * (pagination.currentPage - 1) +
                scope.$index +
                1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" width="140">
          <template v-slot="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="phone" width="140">
          <template v-slot="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" prop="email" width="180">
          <template v-slot="scope">
            <span>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" prop="role_id" width="120">
          <template v-slot="scope">
            <span>{{ role(scope.row.role_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="120">
          <template v-slot="scope">
            <span>{{ scope.row.remark || "无" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template v-slot="scope">
            <span>{{ scope.row.status == 0 ? "禁用" : "开启" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="changeStatus(scope.row.id)"
              >{{ scope.row.status == 0 ? "启用" : "禁用" }}</el-button
            >
            <el-button type="text" size="small" @click="edit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[1, 5, 20, 40]"
        :page-size="pagination.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        class="page"
      >
      </el-pagination>
    </div>
    <userDialog
      :userInfo="userInfo"
      :mode="mode"
      @getData="getData"
      ref="dialog"
    ></userDialog>
  </div>
</template>

<script>
// import pages from "@/components/pages.vue";
import { getUserList, setUserStatus, delUser } from "@/api/userlist.js";
import userDialog from "@/components/userDialog.vue";
export default {
  components: {
    userDialog,
  },
  data() {
    return {
      formInline: {
        username: "", //	否	string	昵称
        email: "", //	否	string	邮箱
        role_id: "", //	否	string	角色数字 2管理员、3老师、 4学生
        page: "", //	否	string	页码 默认为1
        limit: "", //	否	string	页尺寸 默认为10
      },
      mode: "add",
      tableData: [], //用户列表数据
      userInfo: {}, //编辑弹框数据
      pagination: {
        //页签数据
        total: 1,
        pageSize: 1,
        currentPage: 1,
      },
    };
  },
  methods: {
    clear() {
      console.log("ss");
      this.$refs.topform.resetFields();
    },
    getData() {
      let list = {
        //请求参数对象
        ...this.formInline,
        page: this.pagination.currentPage, //需要请求的页码
        limit: this.pagination.pageSize, //每页内的内容条数
      };
      getUserList(list).then((res) => {
        console.log("列表信息", res);
        this.tableData = res.data.data.items;
        console.log(this.tableData);
        this.pagination.total = res.data.data.pagination.total;
      });
    },
    //返回用户类型
    role(id) {
      if (id == 2) {
        return "管理者";
      } else if (id == 3) {
        return "教师";
      } else if (id == 4) {
        return "学生";
      } else {
        return id;
      }
    },
    //改变用户状态
    changeStatus(id) {
      setUserStatus({ id })
        .then(() => {
          this.$message.success("状态修改成功");
          this.getData();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //删除用户
    handleClick(id) {
      this.$confirm("你确定要删除该用户吗?", "温馨提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delUser({ id })
          .then(() => {
            this.$message.success("删除成功");
            this.getData();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    //新增用户
    add() {
      this.mode = "add";
      this.$refs.dialog.isShow = true;
    },
    //编辑用户
    edit(data) {
      this.$refs.dialog.isShow = true;
      this.mode = "edit";
      this.userInfo = JSON.parse(JSON.stringify(data));
    },
    onSubmit() {
      this.pagination.currentPage = 1;
      this.getData();
    },
    //页容量改变
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getData();
    },
    //当前页改变
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagination.currentPage = val;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less">
.userlist {
  .el-table__header,
  .el-table__body {
    margin: 0 auto;
    text-align: center;
  }
  .el-table td,
  .el-table th {
    text-align: center;
  }
  .head_top {
    height: 110px;
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    .demo-form-inline {
      margin-left: 20px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .w100 {
      width: 100px;
    }
    .w150 {
      width: 150px;
    }
  }
  .main {
    overflow: hidden;
    position: relative;
    .page {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
}
</style>
